<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus v2.0.0-alpha.53">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41480445-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

<title data-react-helmet="true">Buttons - Pure</title>

<meta data-react-helmet="true" charset="utf-8"><meta data-react-helmet="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-react-helmet="true" property="og:title" content="Buttons - Pure"><meta data-react-helmet="true" name="description" content="Simple CSS for buttons."><meta data-react-helmet="true" property="og:description" content="Simple CSS for buttons."><meta data-react-helmet="true" name="twitter:card" content="summary_large_image">

<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">


<link rel="stylesheet" href="/styles.e0d41c52.css">


<link rel="preload" href="/styles.59801a08.js" as="script">

<link rel="preload" href="/runtime~main.5e4f6629.js" as="script">

<link rel="preload" href="/main.596eb772.js" as="script">

<link rel="preload" href="/common.71de0887.js" as="script">

<link rel="preload" href="/2.5dabb085.js" as="script">

<link rel="preload" href="/a4e393bd.7bddb27e.js" as="script">

</head>
<body>

<div id="__docusaurus">
<div id="layout"><a href="#menu" id="menuLink" class="menu-link"><span></span></a><div id="menu"><div class="pure-menu"><a class="pure-menu-heading" href="/">Pure</a><ul class="pure-menu-list"><li class="pure-menu-item"><a class="pure-menu-link" href="/start/">Get Started</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/layouts/">Layouts</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/base/">Base</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/grids/">Grids</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/forms/">Forms</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/buttons/">Buttons</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/tables/">Tables</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/menus/">Menus</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/tools/">Tools</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/customize/">Customize</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/extend/">Extend</a></li><li class="pure-menu-item"><a href="https://github.com/pure-css/pure/releases/" class="pure-menu-link">Releases</a></li></ul></div></div><div id="main" class="buttons"><div class="header"><h1>Buttons</h1><h2>Simple CSS for buttons.</h2></div><div class="content"><h2 id="default-buttons" class="content-subhead">Default Buttons<a href="#default-buttons" class="content-link" title="Heading anchor"></a></h2><p>To create a Pure Button, add the <code>pure-button</code> classname to any <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> element.</p><div class="example"><div><a class="pure-button" href="#">A Pure Button</a>
<button class="pure-button">A Pure Button</button></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button&quot;</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span>&gt;</span>A Pure Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button&quot;</span>&gt;</span>A Pure Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span></code></pre></div></div></div><h2 id="disabled-buttons" class="content-subhead">Disabled Buttons<a href="#disabled-buttons" class="content-link" title="Heading anchor"></a></h2><p>To mark a button as disabled, add the <code>pure-button-disabled</code> classname alongside <code>pure-button</code>. Alternatively, add the &quot;disabled&quot; attribute directly to your button.</p><div class="example"><div><button class="pure-button pure-button-disabled">A Disabled Button</button>
<button class="pure-button" disabled="">A Disabled Button</button></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button pure-button-disabled&quot;</span>&gt;</span>A Disabled Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button&quot;</span> <span class="hljs-attr">disabled</span>=<span style="color:#219161">&quot;&quot;</span>&gt;</span>A Disabled Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span></code></pre></div></div></div><h2 id="active-buttons" class="content-subhead">Active Buttons<a href="#active-buttons" class="content-link" title="Heading anchor"></a></h2><p>To style a button so that it appears &quot;pressed&quot;, add the <code>pure-button-active</code> classname alongside <code>pure-button</code>.</p><div class="example"><div><a class="pure-button pure-button-active" href="#">An Active Button</a>
<button class="pure-button pure-button-active">An Active Button</button></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button pure-button-active&quot;</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span>&gt;</span>An Active Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button pure-button-active&quot;</span>&gt;</span>An Active Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span></code></pre></div></div></div><h2 id="primary-buttons" class="content-subhead">Primary Buttons<a href="#primary-buttons" class="content-link" title="Heading anchor"></a></h2><p>To indicate that a button represents a primary action, add the <code>pure-button-primary</code> classname alongside <code>pure-button</code>.</p><div class="example"><div><a class="pure-button pure-button-primary" href="#">A Primary Button</a>
<button class="pure-button pure-button-primary">A Primary Button</button></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button pure-button-primary&quot;</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span>&gt;</span>A Primary Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button pure-button-primary&quot;</span>&gt;</span>A Primary Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span></code></pre></div></div></div><h2 id="customizing-buttons" class="content-subhead">Customizing Buttons<a href="#customizing-buttons" class="content-link" title="Heading anchor"></a></h2><p>Thanks to Pure&#x27;s minimal styling, it is easy to build off of the generic Pure button and create customized buttons for your own application.</p><p>To customize button styles, you should group your custom CSS into a class such as <code>button-foo</code>, which you can then add to an element that already has the <code>pure-button</code> classname. Here are some examples.</p><h3 class="content-subhead">Colored buttons with rounded corners</h3><div class="example"><div><div>
    <style scoped="">
        .button-success,
        .button-error,
        .button-warning,
        .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }

        .button-success {
            background: rgb(28, 184, 65);
            /* this is a green */
        }

        .button-error {
            background: rgb(202, 60, 60);
            /* this is a maroon */
        }

        .button-warning {
            background: rgb(223, 117, 20);
            /* this is an orange */
        }

        .button-secondary {
            background: rgb(66, 184, 221);
            /* this is a light blue */
        }
    </style>
    <button class="button-success pure-button">Success Button</button>
    <button class="button-error pure-button">Error Button</button>
    <button class="button-warning pure-button">Warning Button</button>
    <button class="button-secondary pure-button">Secondary Button</button>
</div></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">style</span> <span class="hljs-attr">scoped</span>=<span style="color:#219161">&quot;&quot;</span>&gt;</span><span class="css">
        <span style="color:#19469d">.button-success</span>,
        <span style="color:#19469d">.button-error</span>,
        <span style="color:#19469d">.button-warning</span>,
        <span style="color:#19469d">.button-secondary</span> {
            <span style="color:#000080;font-weight:normal">color</span>: white;
            <span style="color:#000080;font-weight:normal">border-radius</span>: <span style="color:#40a070">4px</span>;
            <span style="color:#000080;font-weight:normal">text-shadow</span>: <span style="color:#40a070">0</span> <span style="color:#40a070">1px</span> <span style="color:#40a070">1px</span> <span style="color:#0086b3">rgba</span>(0, 0, 0, 0.2);
        }

        <span style="color:#19469d">.button-success</span> {
            <span style="color:#000080;font-weight:normal">background</span>: <span style="color:#0086b3">rgb</span>(28, 184, 65);
            <span style="color:#408080;font-style:italic">/* this is a green */</span>
        }

        <span style="color:#19469d">.button-error</span> {
            <span style="color:#000080;font-weight:normal">background</span>: <span style="color:#0086b3">rgb</span>(202, 60, 60);
            <span style="color:#408080;font-style:italic">/* this is a maroon */</span>
        }

        <span style="color:#19469d">.button-warning</span> {
            <span style="color:#000080;font-weight:normal">background</span>: <span style="color:#0086b3">rgb</span>(223, 117, 20);
            <span style="color:#408080;font-style:italic">/* this is an orange */</span>
        }

        <span style="color:#19469d">.button-secondary</span> {
            <span style="color:#000080;font-weight:normal">background</span>: <span style="color:#0086b3">rgb</span>(66, 184, 221);
            <span style="color:#408080;font-style:italic">/* this is a light blue */</span>
        }
    </span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">style</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;button-success pure-button&quot;</span>&gt;</span>Success Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;button-error pure-button&quot;</span>&gt;</span>Error Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;button-warning pure-button&quot;</span>&gt;</span>Warning Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;button-secondary pure-button&quot;</span>&gt;</span>Secondary Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div></div><h3 class="content-subhead">Buttons with different sizes</h3><div class="example"><div><div>
    <style scoped="">
        .button-xsmall {
            font-size: 70%;
        }

        .button-small {
            font-size: 85%;
        }

        .button-large {
            font-size: 110%;
        }

        .button-xlarge {
            font-size: 125%;
        }
    </style>
    <button class="button-xsmall pure-button">Extra Small Button</button>
    <button class="button-small pure-button">Small Button</button>
    <button class="pure-button">Regular Button</button>
    <button class="button-large pure-button">Large Button</button>
    <button class="button-xlarge pure-button">Extra Large Button</button>
</div></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">style</span> <span class="hljs-attr">scoped</span>=<span style="color:#219161">&quot;&quot;</span>&gt;</span><span class="css">
        <span style="color:#19469d">.button-xsmall</span> {
            <span style="color:#000080;font-weight:normal">font-size</span>: <span style="color:#40a070">70%</span>;
        }

        <span style="color:#19469d">.button-small</span> {
            <span style="color:#000080;font-weight:normal">font-size</span>: <span style="color:#40a070">85%</span>;
        }

        <span style="color:#19469d">.button-large</span> {
            <span style="color:#000080;font-weight:normal">font-size</span>: <span style="color:#40a070">110%</span>;
        }

        <span style="color:#19469d">.button-xlarge</span> {
            <span style="color:#000080;font-weight:normal">font-size</span>: <span style="color:#40a070">125%</span>;
        }
    </span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">style</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;button-xsmall pure-button&quot;</span>&gt;</span>Extra Small Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;button-small pure-button&quot;</span>&gt;</span>Small Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button&quot;</span>&gt;</span>Regular Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;button-large pure-button&quot;</span>&gt;</span>Large Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;button-xlarge pure-button&quot;</span>&gt;</span>Extra Large Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div></div><h3 class="content-subhead">Buttons with icons</h3><p>Pure doesn&#x27;t ship with icon fonts, but we play nice with existing ones. Incorporating icon fonts with Pure Buttons is easy. In the example below, we&#x27;re using icon fonts from <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>. Put the <a href="http://fortawesome.github.io/Font-Awesome/get-started/">Font Awesome CSS file</a> on your page and use an <code>&lt;i&gt;</code> element within a <code>pure-button</code> element.</p><div class="example"><div><button class="pure-button">
    <i class="fa fa-cog"></i>Settings
</button>
<a class="pure-button" href="#">
    <i class="fa fa-shopping-cart fa-lg"></i>Checkout
</a></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">i</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;fa fa-cog&quot;</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">i</span>&gt;</span>Settings
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">a</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button&quot;</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;#&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">i</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;fa fa-shopping-cart fa-lg&quot;</span>&gt;</span><span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">i</span>&gt;</span>Checkout
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">a</span>&gt;</span></code></pre></div></div></div><h2 id="button-groups" class="content-subhead">Button Groups<a href="#button-groups" class="content-link" title="Heading anchor"></a></h2><p>Group multiple buttons together on a single line.</p><aside><p>For assistive technologies (i.e, screen readers) a <code>role</code> attribute should be provided to ensure that proper meaning is conveyed. Button groups should have a <code>role=&quot;group&quot;</code>, while toolbars should have <code>role=&quot;toolbar&quot;</code>.</p><p>Additionally, a clear label should be provided since most assistive technologies will not announce them. The code snippet below provides an example.</p></aside><div class="example"><div><div class="pure-button-group" role="group" aria-label="...">
    <button class="pure-button">A Pure Button</button>
    <button class="pure-button">A Pure Button</button>
    <button class="pure-button pure-button-active">A Pure Button</button>
</div></div><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">div</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button-group&quot;</span> <span class="hljs-attr">role</span>=<span style="color:#219161">&quot;group&quot;</span> <span class="hljs-attr">aria-label</span>=<span style="color:#219161">&quot;...&quot;</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button&quot;</span>&gt;</span>A Pure Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button&quot;</span>&gt;</span>A Pure Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
    <span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">button</span> <span class="hljs-attr">class</span>=<span style="color:#219161">&quot;pure-button pure-button-active&quot;</span>&gt;</span>A Pure Button<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">button</span>&gt;</span>
<span style="color:#000080;font-weight:normal">&lt;/<span style="color:#000080;font-weight:normal">div</span>&gt;</span></code></pre></div></div></div></div><div class="footer"><div class="legal pure-g"><div class="pure-u-1 u-sm-1-2"><p class="legal-license">This site is built with ❤️ using Pure v2.0.5<br>All code on this site is licensed under the <a href="https://github.com/pure-css/pure/blob/master/LICENSE">Yahoo BSD License</a> unless otherwise stated.</p></div><div class="pure-u-1 u-sm-1-2"><ul class="legal-links"><li><a href="https://github.com/pure-css/pure/">GitHub Project</a></li><li><a href="https://hackerone.com/yahoo/">Security Contact Info</a></li></ul><p class="legal-copyright">© 2014 - Present Yahoo! Inc. All rights reserved.</p></div></div></div></div></div>
</div>

<script src="/styles.59801a08.js"></script>

<script src="/runtime~main.5e4f6629.js"></script>

<script src="/main.596eb772.js"></script>

<script src="/common.71de0887.js"></script>

<script src="/2.5dabb085.js"></script>

<script src="/a4e393bd.7bddb27e.js"></script>


</body>
</html>